<script setup lang="ts">
import { viewUtlis } from '@renderer/viewUtlis';
import { ElLoading } from 'element-plus';
import { nextTick, onMounted, ref } from 'vue';
import { viewEventMgr } from '../viewEvent/viewEventMgr';

// 创建一个响应式对象
const canvasNode = ref<any | null>(null);
const parent = ref<HTMLElement | null>(null);

/**显示加载页 */
const openLoading = () => {
    ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)'
    });
};
/**关闭 */
const closeLoading = () => {
    ElLoading.service({}).close();
};

// 在组件挂载后尝试获取 canvas 元素
onMounted(() => {
    // 使用 nextTick 确保元素已经渲染完毕
    nextTick(() => {
        console.log('DOM', canvasNode.value);

        selectSpine();
    });

    // 监听父节点大小的变化
    const resizeObserver = new ResizeObserver((entries) => {
        for (const entry of entries) {
            const { width, height } = entry.contentRect;
            // 设置 canvas 元素的大小
            if (canvasNode.value) {
                canvasNode.value.width = width;
                canvasNode.value.height = height;
            }
        }
    });

    // 开始观察父节点
    if (parent.value) {
        resizeObserver.observe(parent.value);
    }

    // 清理
    return () => {
        if (parent.value) {
            resizeObserver.unobserve(parent.value);
        }
    };

});

let viewMgr = new viewUtlis();

const selectSpine = async () => {
    openLoading();
    let assets = await viewEventMgr.ins.selectSpine();
    console.log('assets', assets);
    if (assets) {
        viewMgr.initRuntime(canvasNode.value, assets);
        if(assets.json){
            handleTitle(assets.json.split('.')[0]);
        }else if(assets.skel){
            handleTitle(assets.skel.split('.')[0]);
        }

        let init = () => {
            initSkin(viewMgr.skins)
            initAnimation(viewMgr.animations)
            initSlot(viewMgr.slots)
        }
        viewMgr.initCallback = init;

    }
    closeLoading();
};

const { index } = defineProps(['index'])
const emit = defineEmits(['setName'])
const handleTitle = (name) => {
    emit("setName", index, name)
}

const skinValue = ref('')
const skinOptions = ref([
    {
        value: 'Option1',
        label: 'Option1',
    }
])
const initSkin = (list) => {
    skinOptions.value.splice(0, skinOptions.value.length);
    console.log(list)
    list.forEach((item) => {
        skinOptions.value.push({
            value: item,
            label: item,
        })
    })

    if (list.length == 0) {
        skinOptions.value.push({
            value: '无皮肤',
            label: '无皮肤',
        })
        skinValue.value = '无皮肤'
        return;
    }

    skinValue.value = list[0]


}
const setSkin = () => {
    viewMgr.setSkin(skinValue.value)

    initSlot(viewMgr.slots)
}

const animationValue = ref('')
const animationOptions = ref([
    {
        value: 'Option1',
        label: 'Option1',
    }
])
const initAnimation = (list) => {
    animationOptions.value.splice(0, animationOptions.value.length);
    console.log(list)
    list.forEach((item) => {
        animationOptions.value.push({
            value: item,
            label: item,
        })
    })

    if (list.length == 0) {
        animationOptions.value.push({
            value: '无动画',
            label: '无动画',
        })
        animationValue.value = '无动画'
        return;
    }

    animationValue.value = list[0]


}
const setAnim = () => {
    viewMgr.playAnimation(animationValue.value)

    initSlot(viewMgr.slots)
}

const slotList = ref<Array<any>>([]);
const initSlot = (list) => {
    slotList.value.splice(0, slotList.value.length);
    console.log(list)
    list.forEach((item) => {
        slotList.value.push(item)
    })
}
const setSlot = (slotName, attachmentName) => {
    viewMgr.setSlot(slotName, attachmentName);
    
    initSlot(viewMgr.slots)
}


</script>

<template>
    <div ref="parent" style="max-width: 100vw;max-height: 92vh;min-width: 100vw;min-height: 92vh;position: relative;">
        <canvas style="width: 100%;" ref="canvasNode" width="100%" height="100%">
        </canvas>
        <div class="setBox">
            <div class="selectBox">
                <div class="selectName">皮肤</div>
                <el-select v-model="skinValue" placeholder="皮肤" style="width: 150px" @change="setSkin">
                    <el-option v-for="item in skinOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </div>
            <div class="selectBox">
                <div class="selectName">动画</div>
                <el-select v-model="animationValue" placeholder="动画" style="width: 150px" @change="setAnim">
                    <el-option v-for="item in animationOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </div>

            <div class="selectBox" style="margin-bottom: 10px;max-height: 250;overflow: auto;">

                <div class="property" style="margin-bottom: 2px;" v-for="(item, i) in slotList" :key="i" :value="item">
                    <div class="label">
                        <span class="text" style="vertical-align: top;" >{{ item.name }}</span>
                    </div>

                    <div>
                        <el-button  v-for="(el)  in  item.attachmentNameList" :type="el.isShow?'danger':'info'"
                        @click="setSlot(item.name,el.name)"
                        >{{el.name}}</el-button>

                    </div>
                    
                </div>
            </div>



        </div>
    </div>
</template>

<style>
.setBox {
    position: absolute;
    top: 0;
    right: 5px;
    z-index: 999;
    padding-top: 5px;
}

.selectName {
    color: #fff;
    font-size: 18px;
    display: inline-block;
    margin-right: 5px;
}


.property{
    color: #fff;
}

</style>
